<template>
  <div class="common-table">
    <common-handle
      :module-name="moduleName"
      :export-excel-data="exportExcelData"
      @searchData="searchData($event)"
      @addData="addData"
      @deleteData="deleteData"
    />
    <!-- @handle="handle($event)" -->
    <el-table
      v-loading="loading"
      border
      :data="tableData"
      style="width: 100%;margin-top:20px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <template v-for="item in tableProp">
        <el-table-column
          v-if="
            item.prop !=='permissionList' &&
              item.prop !== 'permissionGroupList' &&
              item.prop !=='isFree' &&
              item.prop !== 'sceneImage'&&
              item.prop !== 'isDisabled' &&
              item.prop !=='isDisabledMode'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        />
        <!-- 用户列表的是否禁用和是否开启禁用 -->
        <el-table-column
          v-if="item.prop === 'isDisabled' || item.prop ==='isDisabledMode'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <el-switch
              v-if="item.prop==='isDisabled'"
              v-model="scope.row.isDisabled"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="isDisabledChange(scope.row)"
            />
            <el-switch
              v-if="item.prop==='isDisabledMode'"
              v-model="scope.row.isDisabledMode"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="isDisabledModeChange(scope.row)"
            />
          </template>
        </el-table-column>
        <!-- 角色列表的权限组 -->
        <el-table-column
          v-if="item.prop === 'permissionGroupList'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <el-tag v-for="permissionGroup in scope.row.permissionGroupList " :key="permissionGroup.id" type="success" style="margin:2px 2px 2px 2px">
              {{ permissionGroup.permissionGroupName }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 权限组列表的拥有权限 -->
        <el-table-column
          v-if="item.prop === 'permissionList'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <el-tag v-for="permission in scope.row.permissionList " :key="permission.id" style="margin:2px 2px 2px 2px">
              {{ permission.permissionName }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 住宿列表的是否空闲 -->
        <el-table-column
          v-if="item.prop ==='isFree'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <template v-if="item.prop==='isFree'">
              <el-tag :type="scope.row.isFree ?'success':'danger'">
                {{ scope.row.isFree?'空闲':'暂无位置' }}
              </el-tag>
            </template>
          </template>
        </el-table-column>
        <!-- 场景图片 -->
        <el-table-column
          v-if="item.prop === 'sceneImage'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <div class="scene-image">
              <img width="200" height="200" :src="`data:image/jpeg;base64,${scope.row.sceneImage}`">
            </div>
          </template>
        </el-table-column>
      </template>

      <el-table-column
        v-if="moduleName !== 'userLog'"
        prop="handle"
        label="操作"
        :width="moduleName==='sceneList'?200:150"
      >
        <template slot-scope="scope">
          <el-button v-if="moduleName ==='sceneList' || moduleName ==='userList'" style="color:green" type="text" @click="detail(scope.row)">查看详情</el-button>
          <el-button v-if="moduleName ==='roomList'" style="color:green" type="text" @click="checkIn(scope.row)">入住</el-button>
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button v-if="moduleName !== 'userList'" type="text" style="color:red" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <user-detail v-if="moduleName ==='userList'" ref="UserDetail" :user-info="userInfo" />

  </div>
</template>

<script>

import CommonHandle from '../commonHandle/index.vue'
import UserDetail from '../userDetail/index.vue'
import { checkInRoom } from '@/api/room'
import { updateIsDisabled, updateIsDisabledMode, getUserById } from '@/api/user'

export default {
  name: 'CommonTable',
  components: { 'common-handle': CommonHandle, 'user-detail': UserDetail },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    moduleName: {
      type: String,
      default: ''
    },
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    tableProp: {
      type: Array,
      default() {
        return []
      }
    },
    exportExcelData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      userInfo: {},
      selectData: []
    }
  },
  watch: {
    // tableData: {
    //   handler(newVal, oldVal) {
    //     this.tableData = newVal
    //     console.log(this.tableData)
    //   },
    //   immediate: true
    // }
  },
  mounted() {
  },
  methods: {
    searchData(data) {
      this.$emit('searchData', data)
    },
    deleteData() {
      const idList = this.selectData.map(item => { return item.id })
      this.$emit('deleteData', idList)
    },
    addData() {
      this.$emit('addData')
    },
    edit(data) {
      this.$emit('editData', data)
    },
    del(data) {
      this.$emit('deleteData', [data])
    },
    handleSelectionChange(val) {
      this.selectData = val
    },
    checkIn(row) {
      checkInRoom(row.id).then(() => {
        this.$message.success('入住成功')
        this.$router.go(0)
      })
    },
    detail(row) {
      if (this.moduleName === 'sceneList') {
        this.$router.push({ path: '/scene-distance', query: { id: row.id }})
      } else if (this.moduleName === 'userList') {
        const { id } = row
        // console.log(id, 'id')
        getUserById(id).then((res) => {
          this.userInfo = res
          this.$refs.UserDetail.showDrawer()
        })
      }
    },
    isDisabledChange(row) {
      const { id, isDisabled } = row

      updateIsDisabled(id, isDisabled).then(() => {
        this.$message.success('修改禁用成功')
      })
    },
    isDisabledModeChange(row) {
      const { id, isDisabledMode } = row
      updateIsDisabledMode(id, isDisabledMode).then(() => {
        this.$message.success('修改禁用模式成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.scene-image{
    text-align: center;
}
.el-table .cell{
  white-space: nowrap;
}
</style>
